<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国传统文化推广</title>
    <style>
        /* 主页的样式 */
        body {
            font-family: Arial, sans-serif;
            height: 100%; /* 设置整个页面高度 */
            margin: 0;
            padding: 0;
            background: url('images/art.jpg') no-repeat center center fixed; /* 设置背景图片 */
            background-size: cover;
            overflow-x: hidden; /* 防止页面水平滚动 */
            overflow-y: auto; /* 允许垂直滚动 */
        }

        header {
            background-color: #8B0000;
            color: white;
            padding: 5px 0;
            text-align: center;
            font-size: 1.2em;
        }
        /* 导航栏样式 */
        nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
            margin: 0; /* 移除默认外边距 */
        }

        nav ul li {
            display: inline-block;
            margin: 0 20px; /* 左右外边距为20px */
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold; /* 粗体 */
            position: relative;
            transition: color 0.3s ease, transform 0.3s ease; /* 文字颜色和缩放效果的过渡 */
        }

        /* 动态效果：鼠标悬停时 */
        nav ul li a:hover {
            color: #FFD700; /* 鼠标悬停时改变文字颜色 */
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }

        /* 动态效果：点击时 */
        nav ul li a:active {
            color: #FF4500; /* 点击时改变文字颜色 */
            transform: scale(0.9); /* 点击时缩小 */
        }

        /* 添加下划线效果 */
        nav ul li a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px; /* 在文字下方 */
            width: 100%;
            height: 2px;
            background-color: #FFD700; /* 下划线颜色 */
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }

        nav ul li a:hover::after {
            transform: scaleX(1);
            transform-origin: left; /* 下划线从左向右展开 */
        }
        /* 图片轮播样式 */
        .slider {
            position: relative;
            width: calc(100% - 70px);
            height: 500px;
            overflow: hidden; /* 隐藏超出轮播容器的内容 */
            margin: 10px 35px;
        }

        .slides {
            display: flex;
            transition: transform 1s ease;
        }

        .slide {
            min-width: 100%;
            transition: opacity 1s ease;
        }

        .slide img {
            width: 100%;
            height: auto;
        }
        /* 内容列样式 */
        .column-overview {
            display: flex;
            flex-direction: column; /* 垂直排列 */
            align-items: center;
            text-align: left; /* 左对齐 */
            padding: 20px;
            gap: 20px; /* 每个内容块之间的间距 */
        }

        .column-overview div {
            display: flex;
            width: calc(100% - 40px); /* 设置宽度，考虑到内边距 */
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s ease, box-shadow 0.3s ease; /* 添加阴影的过渡效果 */
            overflow: hidden; /* 防止内容溢出 */
        }

        .column-overview div:hover {
            transform: scale(1.05); /* 鼠标悬停时放大内容块 */
        }

        .column-overview div a {
            display: flex;
            text-decoration: none;
            color: #333; /* 设置链接文字颜色 */
            transition: color 0.3s ease, background-color 0.3s ease; /* 添加文字颜色和背景色的过渡效果 */
            padding: 10px; /* 增加链接区域的点击范围 */
            align-items: center; /* 垂直居中对齐 */
        }

        .column-overview div a:hover {
            color: #333; /* 鼠标悬停时改变文字颜色为浅灰色 */
            background-color: #8B0000; /* 鼠标悬停时改变背景色 */
        }

        .column-overview img {
            width: 40%;
            height: auto; /* 让图片高度自适应 */
            object-fit: cover; /* 保持图片比例并裁剪到容器的尺寸 */
        }

        .column-overview .content {
            padding: 10px;
            width: 60%;
        }

        .column-overview h3 {
            margin: 0;
            padding: 10px 0;
            background-color: #A52A2A; /* 设置标题背景色 */
            color: white; /* 设置标题文字颜色为白色 */
        }

        .column-overview p {
            padding: 10px;
        }

        footer {
            text-align: center;
            padding: 1px;
            background-color: #8B0000;
            color: white;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1>中国传统文化推广</h1>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="history.html">历史与传说</a></li>
                <li><a href="philosophy.html">哲学思想</a></li>
                <li><a href="arts.html">文学艺术</a></li>
                <li><a href="festivals.html">传统节日</a></li>
                <li><a href="customs.html">民俗风情</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="slider">
            <div class="slides">
                <div class="slide"><img src="images/1.jpg" ></div>
                <div class="slide"><img src="images/2.jpg" ></div>
                <div class="slide"><img src="images/3.jpg" ></div>
                <div class="slide"><img src="images/4.jpg" ></div>
                <div class="slide"><img src="images/5.jpg" ></div>

            </div>
        </div>
        <section class="column-overview">
            <div class="history">
                <a href="history.html">
                    <img src="images/history.png" alt="历史与传说">
                    <div class="content">
                        <h3>历史与传说</h3>
                        <p>探索中国悠久的历史和丰富的传说故事。</p>
                    </div>
                </a>
            </div>
            <div class="philosophy">
                <a href="philosophy.html">
                    <img src="images/phi.jpg" alt="哲学思想">
                    <div class="content">
                        <h3>哲学思想</h3>
                        <p>了解儒家、道家、佛家的思想精髓。</p>
                    </div>
                </a>
            </div>
            <div class="alt">
                <a href="arts.html">
                    <img src="images/altt.jpg" alt="文学艺术">
                    <div class="content">
                        <h3>文学艺术</h3>
                        <p>展示中国古典文学、诗词、书法、绘画等艺术形式。</p>
                    </div>
                </a>
            </div>
            <div class="festivals">
                <a href="festivals.html">
                    <img src="images/fes.jpg" alt="传统节日">
                    <div class="content">
                        <h3>传统节日</h3>
                        <p>展示中国的传统节日，春节，中秋节，端午节等。</p>
                    </div>
                </a>
            </div>
            <div class="customs">
                <a href="customs.html">
                    <img src="images/cus.jpg" alt="民俗风情">
                    <div class="content">
                        <h3>民俗风情</h3>
                        <p>展示又称为传统文化，指民间民众的风俗生活文化。</p>
                    </div>
                </a>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 202006402111 李采珍</p>
    </footer>
    <script>
        // 页面淡入效果
        document.body.style.opacity = 0;
        document.body.style.transition = "opacity 1s ease-in-out";
        window.onload = () => {
            document.body.style.opacity = 1;
        };

        // 图片轮播效果
        const slides = document.querySelector('.slides');
        let currentIndex = 0;
        setInterval(() => {
            currentIndex = (currentIndex + 1) % 5;
            slides.style.transform = `translateX(-${currentIndex * 100}%)`;
        }, 4000);
    </script>
</body>
</html>
